<template>
    <div style="position:relative">
        <Form :model="formItem" :label-width="300" label-position="right">
            <Card :bordered="false" style="background:#fff;padding: 20px;width: 60vw;">
                <p slot="title">修改日记账</p>

                <FormItem label="部门：">
                    <!-- <Input disabled v-model="formItem.department" class="FormItemInput"></Input> -->
                    <Select class="FormItemInput" v-model="formItem.department">
                        <Option v-for="item in demList " :value="item" :key="item">{{ item }}</Option>
                    </Select>
                </FormItem>

                <FormItem label="收入/支出：">
                    <RadioGroup v-model="formItem.income_and_expend">
                        <Radio :label="1"> 收入 </Radio>
                        <Radio :label="2"> 支出 </Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem label="账目类型：">
                    <Select class="FormItemInput" v-model="formItem.type">
                        <Option v-for="item in cateList " :value="item" :key="item">{{ item }}</Option>
                    </Select>
                </FormItem>

                <FormItem label="日期：">
                    <DatePicker type="date" format="yyyy-MM-dd" @on-change="changeTime($event)" :value="formItem.now_date" class="FormItemInput"></DatePicker>
                </FormItem>

                <FormItem label="收据编号：">
                    <Input v-model="formItem.receipt_number" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="合同编号：">
                    <Input v-model="formItem.contract_number" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="金额：">
                    <Input v-model="formItem.money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="摘要：">
                    <Input type="textarea" v-model="formItem.abstract" class="FormItemInput"></Input>
                </FormItem>

                <Button type="primary" class="sure_btn" @click="save">保存</Button>
            </Card>
        </Form>

        <Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
    import axios from '@/libs/api.request'
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    export default {
        name: 'journal-edit',
        data() {
            return {

                // 加载状态
                loading: false,

                // 日记账id
                wraid: '',

                cateList: [],

                formItem: {
                    abstract: '',
                    contract_number: '',
                    department: '',
                    income_and_expend: 1,
                    money: '',
                    now_date: '',
                    receipt_number: '',
                    type: '',
                }
            }
        },
        computed: {
            demList() {
                return this.getDem()
            }
        },
        methods: {
            ...mapGetters(['getDem']),
            ...mapMutations(['myClose']),
            // 获取账目类别列表
            getAccountCategoryList() {
                axios.ajax_post('admin-work_record_account-ajax_get_account_conf', {}).then(res => {
                    if (res.data.code === 1) {
                        this.cateList = res.data.data.work_recoud_account_type
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 获取账目详情
            getAccountDetail() {
                this.loading = true
                axios.ajax_post('admin-work_record_account-ajax_get_wra_detail', {
                    wraid: this.wraid
                }).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.formItem = res.data.data.wra_detail
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 格式化日期
            changeTime(e) {
                this.formItem.now_date = e
            },

            save() {
                let data = this.formItem
                data.wraid = this.wraid
                axios.ajax_post('admin-work_record_account-ajax_save_wra', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.myClose('journal-edit')
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            }
        },
        created() {
            this.wraid = this.$route.params.wraid
            this.getAccountCategoryList()
            this.getAccountDetail()
        },
        activated() {
            if (this.wraid != this.$route.params.wraid) {
                this.wraid = this.$route.params.wraid
                this.getAccountCategoryList()
                this.getAccountDetail()
            }
        }
    }
</script>

<style lang='less' scoped>
    .FormItemInput {
        width: 20vw;
    }

    .sure_btn {
        margin-left: 20vw;
        width: 10vw;
    }
</style>